<template>
  <div class="">
    <div class="headmainbox">
      <div class="headtitlebox">
        <div class="headtitle">医学影像解剖考练系统</div>
        <div class="headtitledes">学生端</div>
      </div>
      <a-dropdown trigger="click">
        <div :style="{ cursor: 'pointer' }">
          <a-avatar :size="32" :style="{ marginRight: '8px' }"> </a-avatar>
          {{ userdata.studentName }}
        </div>
        <template #content>
          <!-- <a-doption>
            <a-space @click="handleLogout">
              <icon-export />
              <span>
                {{ $t('messageBox.logout') }}
              </span>
            </a-space>
          </a-doption> -->
          <a-doption>
            <a-space @click="userfn">
              <icon-pen-fill />
              <span> 个人中心 </span>
            </a-space>
          </a-doption>
        </template>
      </a-dropdown>
      <!-- <div class="userbox">
        <div class="userimgbox"> </div>
        <div class="usernamebox">{{ userdata.studentName }}</div>
        <a-dropdown trigger="click">
          <template #content>
            <a-doption>
              <a-space @click="handleLogout">
                <icon-export />
                <span>
                  {{ $t('messageBox.logout') }}
                </span>
              </a-space>
            </a-doption>
            <a-doption>
              <a-space @click="uploadShow = true">
                <icon-pen-fill />
                <span> 修改密码 </span>
              </a-space>
            </a-doption>
          </template>
        </a-dropdown>
      </div> -->
    </div>
    <div class="headmenbox">
      <div
        :class="item.id == mensid ? 'mensitemhover' : ''"
        class="mensitem"
        v-for="item in mensdata"
        :key="item.id"
        @click="tag(item.id)"
      >
        {{ item.name }}

        <div class="mensitemac" v-if="mensid == item.id"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, defineEmits } from 'vue';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import useUser from '@/hooks/user';
  import { getUser } from '@/api/tplist';
  const router = useRouter();
  const props = defineProps<{
    mensid: string;
  }>();
  const emit = defineEmits<{
    (event: 'customEvent', payload: any): void; // 定义自定义事件
  }>();
  const { logout } = useUser();
  const handleLogout = () => {
    logout();
  };
  const userdata = ref({});
  const fetchData = () => {
    // 查询学生信息
    getUser({}).then((res: any) => {
      if (res.code == 200) {
        console.log('查询学生信息完成', res.data);
        // studentId.value = res.data.studentId;
        userdata.value = res.data;
      }
    });
  };
  fetchData();
  const userfn = () => {
    router.push({
      name: 'user',
    });
  };
  //   切换id

  const tag = (id: any) => {
    mensid.value = id;
    if (id == 1) {
      router.push({
        name: 'dashboard',
      });
    }
    if (id == 2) {
      router.push({
        name: 'exramlist',
      });
    }
    if (id == 3) {
      router.push({
        name: 'exramjlist',
      });
    }
  };
  const mensid = ref(props.mensid);

  const mensdata = ref([
    {
      id: '1',
      name: '图谱学习',
    },
    {
      id: '2',
      name: '考核列表',
    },
    {
      id: '3',
      name: '考核记录',
    },
  ]);
</script>

<style scoped>
  .headmainbox {
    width: 100%;
    background-color: #ffffff;
    height: 62px;
    display: flex;
    align-items: center;
    padding: 0 350px;
    justify-content: space-between;
  }
  .headmenbox {
    width: 100%;
    height: 55px;
    background: #3890ff;
    display: flex;
    padding: 0 350px;
  }
  .headtitlebox {
    display: flex;
  }
  .headtitle {
    font-size: 30px;
    font-weight: bold;
  }
  .headtitledes {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 36px;
    background: #3890ff;
    border-radius: 40px 40px 40px 40px;
    font-size: 18px;
    color: #ffffff;
    margin-left: 10px;
  }
  .userbox {
    cursor: pointer;
    display: flex;
    height: 55px;
    align-items: center;
  }
  .userimgbox {
    width: 44px;
    height: 44px;
    border-radius: 24px 24px 24px 24px;
    border: 1px solid #dcdfe6;
    overflow: hidden;
  }
  .userimgbox img {
    width: 44px;
    height: 44px;
  }
  .usernamebox {
    color: #666666;
    font-size: 16px;
    margin-left: 8px;
  }
  .mensitem {
    cursor: pointer;
    height: 55px;
    font-weight: 500;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 55px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 55px;
    position: relative;
  }
  .mensitem:hover {
    color: #ffffff;
  }
  .mensitem:nth-child(1) {
    margin-left: 0px;
  }
  .mensitemhover {
    color: #ffffff;
  }
  .mensitemac {
    width: 42px;
    height: 5px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate(-50%, 0);
  }
</style>
